<template>
  <div>
    <base-crud-table
      :th-arr="thArr"
      :on-edit-row="onEditRow"
      :list="list"
      :list-loading="listLoading"
    />
    <base-modify-dialog
      :show-delete="dialog.showDelete"
      :title="dialog.title"
      :visible="dialog.visible"
      :on-submit="onSubmitDialogData"
      :on-delete="onDeleteDialogData"
      :on-close-dialog="onCloseDialog"
    >
      <!-- TODO:补齐 form -->
      <template #body>
        <el-form ref="form" :model="dialog.value" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="dialog.value.userName" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model.number="dialog.value.userAge" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="dialog.value.userGender" />
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="dialog.value.userTelephone" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="dialog.value.userAddress" />
          </el-form-item>
        </el-form>
      </template>
    </base-modify-dialog>
  </div>
</template>
<script>
import BaseCrudTable from '@/components/BaseCrudTable/index'
import BaseModifyDialog from '@/components/BaseModifyDialog/index'
export default {
  name: 'CustomerTable',
  components: { BaseModifyDialog, BaseCrudTable },
  data() {
    return {
      // TODO: 对齐对应 table 样式字段
      // 用于定义表格显示文字和样式
      thArr: [
        { key: 'userName', align: 'center', label: '用户名', width: 150 },
        { key: 'userAge', align: 'center', label: '年龄', width: 50 },
        { key: 'userGender', align: 'center', label: '性别', width: 50 },
        { key: 'userTelephone', align: 'center', label: '电话号码', width: 160 },
        { key: 'userAddress', align: 'center', label: '地址' }
      ],
      // TODO: 对齐列表字段
      list: [
        {
          id: 'xxxx',
          userName: '用户',
          userAge: 10,
          userTelephone: 1234567,
          userGender: '男',
          userAddress: '某个地址xxxxxx'
        }
      ],
      listLoading: true,
      // 新增 / 修改 Dialog 相关配置
      dialog: {
        name: '客户',
        title: '新增',
        visible: false,
        showDelete: false,
        // TODO: 对齐接口字段
        value: {
          id: '',
          userName: '',
          userAge: 0,
          userTelephone: '',
          userGender: '',
          userAddress: ''
        }
      }
    }
  },
  created() {
    // TODO: 拉取list并覆盖
    this.listLoading = false
  },
  methods: {
    getDialogValue(data) {
      if (!data) {
        Object.entries(this.dialog.value).forEach(([key, value]) => {
          this.dialog.value[key] = null
        })
      }
      this.dialog.value = { ...this.dialog.value, ...data }
    },
    onEditRow(data) {
      this.dialog.showDelete = !!data
      this.dialog.title = `${data ? '修改' : '新增'}${this.dialog.name}`
      this.dialog.visible = true
      this.getDialogValue(data)
    },
    onSubmitDialogData() {
      // 点击弹出的新增 / 修改对话框的确定按钮触发事件
      // TODO: 提交新增 / 修改后的 data
      this.dialog.visible = false
    },
    onDeleteDialogData() {
      // TODO: 拉接口删除数据
      this.dialog.visible = false
    },
    onCloseDialog() {
      this.dialog.visible = false
    }
  }
}
</script>
